<script setup lang="ts">
import pageWrap from "@/components/pageWrap/index.vue";
import { onMounted, ref, reactive } from "vue";
import {
  Form,
  FormItem,
  Input,
  Tag,
  Table,
  Button,
  Popconfirm,
} from "ant-design-vue";
import type { TableProps } from "ant-design-vue";
import { columns, columnsRight } from "./dict.data";
import { useElementSize } from "@vueuse/core";
import { dictTypeApi, userDelApi, dictDataApi } from "@/api/System/dict";
import { useTableAnt } from "@/hooks/useTableAnt";
import DictTypeModal from "./components/dictTypeModal.vue";
import DictDataModal from "./components/dictDataModal.vue";

const {
  tableListRef,
  loading,
  tableList,
  pagination,
  query,
  queryData,
  handleDelete,
} = useTableAnt<SysUserType, SysUserQuery>({
  api: dictTypeApi,
  delApi: userDelApi,
});
const tableistRActive: any = ref([]);
const {
  tableListRef: tableListRefR,
  loading: loadingR,
  tableList: tableistR,
  pagination: paginationR,
  query: queryR,
  queryData: queryDataR,
  handleDelete: handleDeleteR,
} = useTableAnt<SysUserType, SysUserQuery>({
  api: dictDataApi,
  delApi: userDelApi,
});
const tableContent = ref(null);
const dataTypeModalRef = ref();
const dataDataModalRef = ref();
const activeType = reactive({
  name: "",
  id: "",
  dictType: "",
});

const { height } = useElementSize(tableContent);

const onSubmit = () => {
  queryData();
};
const onSubmitR = () => {
  queryDataR();
};
const handleResize = () => {
  query.value = {};
  queryData();
};
const handleResizeR = () => {
  queryR.value = {};
  queryDataR();
};
const handleAdd = () => {
  dataTypeModalRef.value.open("add", `新增字典`);
};
const handleAddR = () => {
  dataDataModalRef.value.open("add", `新增标签`, {
    dictType: activeType.dictType,
  });
};
const handleEdit = (row: any) => {
  dataTypeModalRef.value.open("add", `修改字典(${row.name})`, row);
};
const handleEditR = (row: any) => {
  dataDataModalRef.value.open("add", `修改标签(${row.label})`, row);
};
const rowSelection: TableProps["rowSelection"] = {
  type: "radio",
  onChange: (selectedRowKeys: any, selectedRows: any) => {
    activeType.name = selectedRows[0].name;
    activeType.dictType = selectedRows[0].type;
    activeType.id = selectedRows[0].id;
    queryDataR();
    getRightData();
  },
  getCheckboxProps: (record: any) => ({
    disabled: record.name === "Disabled User", // Column configuration not to be checked
    name: record.name,
  }),
};
const getRightData = () => {
  tableistRActive.value = tableistR.value;
};
onMounted(() => {
  query.value = {};
});
</script>
<template>
  <div class="flex justify-between w-full h-full">
    <pageWrap class="w-1/2">
      <div class="bg-white p-2" style="height: 10%">
        <Form layout="inline" :model="query">
          <FormItem label="字典名称">
            <Input v-model:value="query.title" placeholder="请输入字典名称" />
          </FormItem>
          <FormItem>
            <Button type="primary" @click.prevent="onSubmit">查询</Button>
            <Button style="margin-left: 10px" @click="handleResize"
              >重置</Button
            >
            <Button style="margin-left: 10px" @click="handleAdd"
              >新增字典</Button
            >
          </FormItem>
        </Form>
      </div>
      <div class="bg-white p-2" style="height: 88%" ref="tableContent">
        <Table
          :columns="columns"
          ref="tableListRef"
          :loading="loading"
          size="small"
          rowKey="id"
          :dataSource="tableList"
          bordered
          :pagination="pagination"
          @change="queryData"
          :total="50"
          :scroll="{ y: height - 100 }"
          :row-selection="rowSelection"
        >
          <template #bodyCell="{ record, column }">
            <template v-if="column.key === 'status'">
              <Tag color="green" v-if="record.status === 1">启用</Tag>
              <Tag color="red" v-else>关闭</Tag>
            </template>
            <template v-if="column.key === 'action'">
              <Button type="link" @click="handleEdit(record)">修改</Button>
              <Popconfirm
                title="确认删除?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="handleDelete(record.id)"
              >
                <Button type="text" danger>删除</Button>
              </Popconfirm>
            </template>
          </template>
        </Table>
      </div>
    </pageWrap>
    <pageWrap class="w-1/2">
      <div class="bg-white p-2" style="height: 10%">
        <Form layout="inline" :model="queryR">
          <FormItem label="字典标签">
            <Input v-model:value="queryR.title" placeholder="请输入字典标签" />
          </FormItem>
          <FormItem>
            <Button
              :disabled="activeType.name ? false : true"
              type="primary"
              @click.prevent="onSubmitR"
              >查询</Button
            >
            <Button
              :disabled="activeType.name ? false : true"
              style="margin-left: 10px"
              @click="handleResizeR"
              >重置</Button
            >
            <Button
              :disabled="activeType.name ? false : true"
              style="margin-left: 10px"
              @click="handleAddR"
              >新增标签</Button
            >
          </FormItem>
        </Form>
      </div>
      <div class="bg-white p-2" style="height: 88%" ref="tableContent">
        <Tag color="success" class="mb-2">{{
          activeType.name || "请选择字典"
        }}</Tag>
        <Table
          :columns="columnsRight"
          ref="tableListRefR"
          :loading="loadingR"
          size="small"
          :dataSource="tableistRActive"
          bordered
          :pagination="paginationR"
          @change="queryDataR"
          :total="50"
          :scroll="{ y: height - 100 }"
        >
          <template #bodyCell="{ record, column }">
            <template v-if="column.key === 'status'">
              <Tag color="green" v-if="record.status === 1">启用</Tag>
              <Tag color="red" v-else>关闭</Tag>
            </template>
            <template v-if="column.key === 'action'">
              <Button type="link" @click="handleEditR(record)">修改</Button>
              <Popconfirm
                title="确认删除?"
                ok-text="确定"
                cancel-text="取消"
                @confirm="handleDeleteR(record.id)"
              >
                <Button type="text" danger>删除</Button>
              </Popconfirm>
            </template>
          </template>
        </Table>
      </div>
    </pageWrap>
    <DictTypeModal ref="dataTypeModalRef" />
    <DictDataModal ref="dataDataModalRef" />
  </div>
</template>
<style scoped lang="less"></style>
